<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jessica async demo</title>
    <style>
        .root {
            display: flex;
            place-content: center;
            margin-top: 3rem;
        }

        .container-shell {
            backdrop-filter: blur(5px);
            background: hsla(0, 0%, 50%, 0.5);
            padding: 30px 4px 10px 4px;
            /* border: 2px solid black; */
            width: auto;
            position: relative;
            border-radius: 5px;
            box-shadow: 0 10px 20px;
        }

        .container-shell:before {
            content: "jessibuca demo player";
            position: absolute;
            color: darkgray;
            top: 4px;
            left: 10px;
            text-shadow: 1px 1px black;
        }

        #container {
            background: rgba(13, 14, 27, 0.7);
            width: 640px;
            height: 398px;
        }

        .input {
            display: flex;
            margin-top: 10px;
            color: white;
            place-content: stretch;
        }

        .input2 {
            bottom: 0px;
        }

        .input input {
            flex: auto;
        }

        .err {
            position: absolute;
            top: 40px;
            left: 10px;
            color: red;
        }

        .option {
            position: absolute;
            top: 4px;
            right: 10px;
            display: flex;
            place-content: center;
            font-size: 12px;
        }

        .option span {
            color: white;
        }

        .page {
            background: url('./bg.jpg');
            background-repeat: no-repeat;
            background-position: top;
        }

        @media (max-width: 720px) {
            #container {
                width: 90vw;
                height: 52.7vw;
            }
        }
    </style>
</head>
<body class="page">
<div class="root">
    <div class="container-shell">
        <div id="container"></div>
        <div class="input">
            <div><input
                type="checkbox"
                id="useMSE"
            /><span>MediaSource</span>
                <input
                    type="checkbox"
                    id="useWCS"
                /><span>Webcodec</span>
                <input
                    type="checkbox"
                    id="useSIMD"
                /><span>SIMD</span>
            </div>
        </div>
        <div class="input">
            <div>
                <span>缓存时长：</span>
                <input placeholder="单位：秒" type="text" id="videoBuffer" style="width: 50px" value="0.2">秒
                <span>缓存延迟(延迟超过会触发丢帧)：</span>
                <input placeholder="单位：秒" type="text" id="videoBufferDelay" style="width: 50px" value="1">秒
                <button id="replay">重播</button>
            </div>
        </div>

        <div class="input">
            <div>输入URL：</div>
            <input
                autocomplete="on"
                id="playUrl"
                value=""
            />
            <button id="play">播放</button>
            <button id="pause" style="display: none">停止</button>
            <button id="pause2" style="display: none">停止(清屏)</button>

        </div>
        <div class="input" style="line-height: 30px">
            <button id="destroy">销毁</button>
        </div>
    </div>
</div>

<script>

    var $player = document.getElementById('play');
    var $pause = document.getElementById('pause');
    var $pause2 = document.getElementById('pause2');
    var $playHref = document.getElementById('playUrl');
    var $container = document.getElementById('container');
    var $destroy = document.getElementById('destroy');
    var $useMSE = document.getElementById('useMSE');
    var $useSIMD = document.getElementById('useSIMD');
    var $useWCS = document.getElementById('useWCS');
    var $videoBuffer = document.getElementById('videoBuffer');
    var $videoBufferDelay = document.getElementById('videoBufferDelay');
    var $replay = document.getElementById('replay');

    var showOperateBtns = true; // 是否显示按钮
    var forceNoOffscreen = true; //
    var jessibuca = null;

    var loadJs = function (script_file_url, script_id, callback) {
        if (!script_file_url) {
            return
        }

        var head = document.head || document.getElementByTagName("head")[0] || document.documentElement;
        var script = document.createElement("script");
        script.setAttribute("type", "text/javascript");
        script.setAttribute("src", script_file_url);
        script.setAttribute("charset", "utf-8");

        if (script_id) {
            script.setAttribute("id", script_id);
            var scriptId = document.getElementById(script_id);
            // 如果已经添加了，删除掉。
            if (scriptId) {
                head.removeChild(scriptId);
            }
        }
        head.appendChild(script);

        // IE
        if (window.all) {
            script.onreadystatechange = function () {
                if (script.readyState === "loaded" || script.readyState === "complete") {
                    // 执行后续事件
                    callback && callback();
                }
            };
        }
        // W3C
        else {
            script.onload = function () {
                // 执行后续操作。
                callback && callback();
            };
        }
    };


    function _create() {
        jessibuca = new JessibucaPro({
            container: $container,
            decoder: './decoder-pro.js',
            videoBuffer: Number($videoBuffer.value), // 缓存时长
            videoBufferDelay: Number($videoBufferDelay.value), // 1000s
            isResize: false,
            text: "",
            loadingText: "加载中",

            isFlv: true,
            debug: true,
            debugLevel: "debug",
            // hasAudio:false,
            useMSE: $useMSE.checked === true,
            useSIMD: $useSIMD.checked === true,
            useWCS: $useWCS.checked === true,
            showBandwidth: showOperateBtns, // 显示网速
            showPerformance: showOperateBtns, // 显示性能
            hiddenAutoPause: true,
            operateBtns: {
                fullscreen: showOperateBtns,
                screenshot: showOperateBtns,
                play: showOperateBtns,
                audio: showOperateBtns,
                record: showOperateBtns,
                ptz: showOperateBtns,
                quality: showOperateBtns,
                performance: showOperateBtns,
            },
            heartTimeoutReplayUseLastFrameShow: true,
            audioEngine: "worklet",
            qualityConfig: ['普清', '高清', '超清', '4K', '8K'],
            forceNoOffscreen: forceNoOffscreen,
            isNotMute: false,
            loadingTimeout: 10,
            heartTimeout: 10,
            contextmenuBtns: [
                {
                    content: '切换性能面板',
                    index: 1,
                    click: () => {
                        const playStatus = jessibuca.getStatus()
                        if (playStatus === 'playing') {
                            jessibuca.togglePerformancePanel();
                        } else {
                            // ElMessage.warning('请先播放视频');
                        }
                    }
                },
                {
                    content: '关于PRO',
                    index: 2,
                    click: () => {
                        // ElMessage.success('如需要购买PRO版本可以联系添加作者微信：bosswancheng');
                        console.log('如需要购买PRO版本可以联系添加作者微信：bosswancheng')
                    }
                }
            ],
            recordType: 'webm'

            // audioEngine:"worklet",
            // isFlv: true
        },);


        jessibuca.on('ptz', (arrow) => {
            console.log('ptz', arrow);
        })

        jessibuca.on('streamQualityChange', (value) => {
            console.log('streamQualityChange', value);
        })

        jessibuca.on('timeUpdate', (value) => {
            // console.log('timeUpdate', value);
        })

        $player.style.display = 'inline-block';
        $pause.style.display = 'none';
        $pause2.style.display = 'none';
        $destroy.style.display = 'none';
    }


    function create() {
        return new Promise((resolve, reject) => {
            if (window.JessibucaPro) {
                resolve()
            } else {
                loadJs('./jessibuca-pro.js', 'jessibuca-pro', function () {
                    resolve()
                })
            }
        })
    }


    create().then(() => {
        _create();
    })

    function play() {
        var href = $playHref.value;
        if (href) {
            jessibuca.play(href);
            $player.style.display = 'none';
            $pause.style.display = 'inline-block';
            $pause2.style.display = 'inline-block';
            $destroy.style.display = 'inline-block';
        }
    }


    function replay() {
        if (jessibuca) {
            jessibuca.destroy().then(() => {
                create().then(() => {
                    _create();
                    play();
                });
            });
        } else {
            create().then(() => {
                _create();
                play();
            });
        }


    }

    $replay.addEventListener('click', function () {
        replay();
    })

    $player.addEventListener('click', function () {
        play();
    }, false)


    $pause.addEventListener('click', function () {
        $player.style.display = 'inline-block';
        $pause.style.display = 'none';
        $pause2.style.display = 'none';
        jessibuca.pause();
    })
    $pause2.addEventListener('click', function () {
        $player.style.display = 'inline-block';
        $pause.style.display = 'none';
        $pause2.style.display = 'none';
        jessibuca.pause(true);
    })

    $destroy.addEventListener('click', function () {
        if (jessibuca) {
            jessibuca.destroy().then(() => {
                create().then(() => {
                    _create();
                });
            });
        } else {
            create().then(() => {
                _create();
            });
        }

    })

    $useMSE.addEventListener('click', function () {
        const checked = $useMSE.checked;
        if (checked) {
            $useSIMD.checked = false
            $useWCS.checked = false
        }
        replay();
    })

    $useSIMD.addEventListener('click', function () {
        const checked = $useSIMD.checked;
        if (checked) {
            $useMSE.checked = false
            $useWCS.checked = false
        }
        replay();
    })

    $useWCS.addEventListener('click', function () {
        const checked = $useWCS.checked;
        if (checked) {
            $useMSE.checked = false
            $useSIMD.checked = false
        }
        replay();
    })

</script>

</body>
</html>
